<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Proxy</title>
	</head>
	<body>
		<script>
			// 源数据
			let person = {
				name: "张三",
				age: 18
			};
			// vue2.x 数据响应式 name
			let a = {};
			Object.defineProperty(a, "name", {
				configurable: true, // 属性是否可被删除，默认值为false
				enumerable: false, // 属性是否可枚举，默认值为false
				// writable: false, // 属性是否可修改，默认值为false
				// value: 'name', // 属性默认值，默认值为undefined
				// 读 a.name
				get() {
					return person.name;
				},
				// 写a.name
				set(val) {
					console.log("set name", val);
					person.name = val;
				},
			});
			// age 方便写 就不遍历person key了
			Object.defineProperty(a, "age", {
				// 读 a.name
				get() {
					return person.age;
				},
				// 写a.name
				set(val) {
					console.log("set age", val);
					person.age = val;
				},
			});
			// 创建对象
			var obj = {
			    name: 'hjm',
			    age: 18,
			    school:"SKD University",
			    home: 'China'
			}
			 
			// 用forEach()进行遍历
			var keys = Object.keys(obj).forEach(function (val, key) {
			    console.log("obj ", val, ": ", obj[val]);
			});
		</script>
	</body>
</html>